<template>
<div>
  <el-descriptions style="margin: 20px auto;width: 700px" :column="2" border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名称
      </template>
      {{user.username}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-star-on"></i>
        用户密码
      </template>
      {{user.password}}
      <el-button style="float: right" type="primary" size="small" @click="changePass">修改</el-button>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      {{user.phone}}
      <el-button style="float: right" type="primary" size="small" @click="changePhone">修改</el-button>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-s-custom"></i>
        身份
      </template>
      {{user.identity}}
    </el-descriptions-item>
  </el-descriptions>
  <el-button type="primary" size="small"  @click="add">
    新增用户
  </el-button>
  <el-table
    stripe
    border
    :data="userData"
    style="width: 100%;margin: 10px auto;padding:10px"
    ref = 'userTable'
    @selection-change="handlerSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="序号">
      <template v-slot="scope">
        <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="userid"
      label="用户ID">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名称">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="身份"
      width="100"
      :filters="[{ text: '初级', value: '初级' }, { text: '高级', value: '高级' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.identity === '初级' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.identity}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="options"
      label="操作"
      width="150">
      <template v-slot="scope">
        <el-button
          size="mini"
          @click="deleteOne(scope.$index,scope.row)">
          删除
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="change(scope.$index,scope.row)">
          修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination" style="margin-top:20px;text-align:center;">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total,prev, sizes, pager, next,jumper"
      :current-page.sync="pageParams.pageNum"
      :page-size="pageParams.pageSize"
      :page-sizes="[10,20,50,100]"
      :total="userData.length">
    </el-pagination>
  </div>
  <el-button size="small" style="margin-top: 10px"
             type="primary"
             @click = "deleteMany"
             :disabled="this.selectItems.length===0">
    批量删除
  </el-button>
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
    <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
    <el-form :model="userForm" ref="userForm" label-width="120px" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="userForm.phone" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="身份" prop="identity">
        <el-radio-group v-model="userForm.identity">
          <el-radio label="初级"></el-radio>
          <el-radio label="高级"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <!-- 设置触发更新的方法 -->
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      user: {
        username: 'Senior Admin',
        password: '1900000',
        phone: '13567890987',
        identity: '高级',
      },
      userData:[
        {
          userid:'001',
          username: 'admin1',
          password: '1900000',
          phone: '13567890987',
          identity: '高级',
        },
        {
          userid:'002',
          username: 'admin2',
          password: '1900000',
          phone: '13567890987',
          identity: '初级',
        },
        {
          userid:'003',
          username: 'admin3',
          password: '1900000',
          phone: '13567890987',
          identity: '高级',
        }
      ],
      selectItems:[],
      dialogFormVisible: false,
      userForm: {},
      rowIndex:null,
      dialogTitle: '',
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      rules:{
        username:[{required: true,message:'请输入用户名称',trigger:'blur'}],
        password:[{required: true,message:'请输入密码',trigger:'blur'}],
        phone:[{required:false,message:'请输入手机号码',trigger:'blur'}]
      }
    }
  },
  methods:
    {
      changePass(){
        this.$prompt('请输入由数字，字母或下划线构成的1~10位新密码', '修改密码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\w{1,10}$/,
          inputErrorMessage: '密码格式不正确'
        }).then(({ value }) => {
          this.user.password = value;
          this.$message({
            type: 'success',
            message: '你的新密码是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      changePhone(){
        this.$prompt('请输入新手机', '修改手机号', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/,
          inputErrorMessage: '手机格式不正确'
        }).then(({ value }) => {
          this.user.phone = value;
          this.$message({
            type: 'success',
            message: '你的新手机是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      add(){
        this.dialogTitle = '新增用户';
        this.dialogFormVisible = true;
      },
      deleteOne(index,row){
        this.$confirm('此操作将永久删除用户, 是否执行?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.userData.splice(index,1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      change(index,row)
      {
        this.dialogTitle ='修改用户';
        // 将数据的index传递过来用于实现数据的回显
        this.userForm = row;
        console.log(this.userForm);
        // 设置对话框的可见
        this.dialogFormVisible = true;
        this.rowIndex=index;

      },
      handlerSelectionChange(val){
        console.log(val);
        this.selectItems = val;
      },
      // 弹窗肯定
      submit() {
        this.$refs.userForm.validate((valid)=>
        {
          if(valid)
          {
            if (this.dialogTitle === '新增用户') {
              console.log(data)
              this.postRequest('http://localhost:8848/nacos/v1/console/namespaces',data).then((res)=>{
                if(res)
                {
                  console.log(res);
                }
              })
            }else{
              this.putRequest('http://localhost:8848/nacos/v1/console/namespaces',data).then((res)=>{
                if(res)
                {
                  console.log(res);
                }
              })
            }
            this.userForm = {};
            this.dialogFormVisible = false;
          }else
          {
            this.$message.error('请按要求输入数据');
            return false;
          }
        })

      },
      deleteMany()
      {
        this.$confirm('确认批量删除?', '批量删除操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.selectItems.forEach(item=>{
            console.log(item.number);
            this.namespaceData.delete(item.number);
          })
          this.$message({
            type: 'success',
            message: '批量删除成功!'
          });
          //每次选择后清空
          this.$refs.namespaceTable.clearSelection();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageParams.pageNum = 1;
        this.pageParams.pageSize = val;
      },

      handleCurrentChange(val) {
        this.pageParams.pageNum = val;
      },
      filterTag(value, row) {
        return row.identity === value;
      },
    }
}
</script>

<style scoped>

</style>
